<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="author" content="何开成">
		<title></title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<style>
			.encapsulation {
				width: 1226px;
				margin: 0 auto;
			}
			
			.clear {
				clear: both;
			}
			
			.navbar-header img {
				margin-top: -20px;
				height: 55px;
			}
			
			.header-navbar {
				margin-top: 16px;
				font-size: 16px;
			}
			
			.header-navbar ul {
				margin-left: 100px;
			}
			
			.header-navbar ul a {
				color: black;
			}
			
			.header-navbar form {
				padding: 0;
			}
			
			.navigation ul li:hover {
				background-color: white;
			}
			
			.lunbo {
				margin: 0 auto;
				width: 1226px;
				position: relative;
				padding-right: 0;
			}
			
			.lunbo img {
				width: 100%;
			}
			
			#left {
				font-size: 30px;
				color: gray;
				opacity: 0.7;
				position: absolute;
				top: calc(50% - (30px / 2));
				left: 245px;
			}
			
			#left:hover {
				color: white;
				background-color: gray;
				opacity: 0.7;
			}
			
			#right {
				font-size: 30px;
				color: gray;
				opacity: 0.7;
				position: absolute;
				top: calc(50% - (30px / 2));
				right: 0;
			}
			
			#right:hover {
				color: white;
				background-color: gray;
				opacity: 0.7;
			}
			
			aside {
				width: 245px;
				height: 100%;
				padding-top: 20px;
				background-color: gray;
				opacity: 0.7;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			aside ul {
				padding: 0;
			}
			
			aside li {
				list-style: none;
				padding: 10px 30px;
			}
			
			aside li a {
				margin: 0;
				text-align: center;
				color: white;
			}
			
			aside li dl {
				margin: 0;
			}
			
			aside li dt {
				float: left;
			}
			
			aside li dd {
				float: right;
			}
			
			aside ul li:hover {
				background-color: orange;
			}
		</style>
	</head>

	<body>
		<nav class="navbar navbar-inverse navbar-static-top">
			<div class="encapsulation">
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">小米商城<span class="sr-only">(current)</span></a></li>
						<li><a href="#">MIUI</a></li>
						<li><a href="#">米聊</a></li>
						<li><a href="#">游戏</a></li>
						<li><a href="#">多看阅读</a></li>
						<li><a href="#">云服务</a></li>
						<li><a href="#">金融</a></li>
						<li><a href="#">小米商城移动版</a></li>
						<li><a href="#">问题反馈</a></li>
						<li><a href="#">Select Region</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">登陆</a></li>
						<li><a href="#">注册</a></li>
						<li><a href="#">消息通知</a></li>
						<li class="active"><a href="#" class="glyphicon glyphicon-shopping-cart">购物车（0）<span class="sr-only">(current)</span></a></li>
					</ul>
				</div>
		</nav>
		<nav class="navbar navbar-static-top">
			<div class="encapsulation">
				<div class="navbar-header">
					<a href="#" class="navbar-brand"><img src="image/logo.jpg" /></a>
				</div>
				<div class="collapse navbar-collapse header-navbar" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navigation">
						<li><a href="#">小米手机</a></li>
						<li><a href="#">红米</a></li>
						<li><a href="#">平板·笔记本</a></li>
						<li><a href="#">电视</a></li>
						<li><a href="#">盒子·影音</a></li>
						<li><a href="#">路由器</a></li>
						<li><a href="#">智能硬件</a></li>
						<li><a href="#">服务</a></li>
						<li><a href="#">社区</a></li>
					</ul>
					<form class="navbar-form navbar-right">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search">
					</div>
					<button type="submit" class="btn btn-default glyphicon glyphicon-search"></button>
				</form>
				</div>
				
			</div>
			</div>
		</nav>
		<div class="encapsulation lunbo">
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
					<li data-target="#carousel-example-generic" data-slide-to="3"></li>
					<li data-target="#carousel-example-generic" data-slide-to="4"></li>
					<li data-target="#carousel-example-generic" data-slide-to="5"></li>
				</ol>
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="lunbo/lun-1.jpg">
						<div class="carousel-caption"></div>
					</div>
					<div class="item">
						<img src="lunbo/lun-2.jpg">
						<div class="carousel-caption"></div>
					</div>
					<div class="item">
						<img src="lunbo/lun-3.jpg">
						<div class="carousel-caption"></div>
					</div>
					<div class="item">
						<img src="lunbo/lun-4.jpg">
						<div class="carousel-caption"></div>
					</div>
					<div class="item">
						<img src="lunbo/lun-5.jpg">
						<div class="carousel-caption"></div>
					</div>
					<div class="item">
						<img src="lunbo/lun-6.jpg">
						<div class="carousel-caption"></div>
					</div>
				</div>
				<!--<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>-->
				<a href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-menu-left" id="left" aria-hidden="true"></span>
				</a>
				<a href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-menu-right" id="right" aria-hidden="true"></span>
				</a>
			</div>
			<aside>
				<ul>
					<li>
						<a href="#">
							<dl>
								<dt>手机 电话卡</dt>
								<dd class="glyphicon glyphicon-menu-right"></dd>
								<div class="clear"></div>
							</dl>
						</a>

					</li>
					<li>
						<a href="#">
							<dl>
								<dt>笔记本 平板</dt>
								<dd class="glyphicon glyphicon-menu-right"></dd>
								<div class="clear"></div>
							</dl>
						</a>

					</li>
					<li>
						<a href="#">
							<dl>
								<dt>电视 盒子</dt>
								<dd class="glyphicon glyphicon-menu-right"></dd>
								<div class="clear"></div>
							</dl>
						</a>

					</li>
					<li>
						<a href="#">
							<dl>
								<dt>路由器 智能硬件</dt>
								<dd class="glyphicon glyphicon-menu-right"></dd>
								<div class="clear"></div>
							</dl>
						</a>

					</li>
					<li>
						<a href="#">
							<dl>
								<dt>移动电源 电池 插线板</dt>
								<dd class="glyphicon glyphicon-menu-right"></dd>
								<div class="clear"></div>
							</dl>
						</a>

					</li>
					<li>
						<a href="#">
							<dl>
								<dt>耳机 音响</dt>
								<dd class="glyphicon glyphicon-menu-right"></dd>
								<div class="clear"></div>
							</dl>
						</a>

					</li>
					<li>
						<a href="#">
							<dl>
								<dt>保护套 贴膜</dt>
								<dd class="glyphicon glyphicon-menu-right"></dd>
								<div class="clear"></div>
							</dl>
						</a>

					</li>
					<li>
						<a href="#">
							<dl>
								<dt>线材 支架 存储卡</dt>
								<dd class="glyphicon glyphicon-menu-right"></dd>
								<div class="clear"></div>
							</dl>
						</a>

					</li>
					<li>
						<a href="#">
							<dl>
								<dt>箱包 服饰 鞋 眼镜</dt>
								<dd class="glyphicon glyphicon-menu-right"></dd>
								<div class="clear"></div>
							</dl>
						</a>

					</li>
					<li>
						<a href="#">
							<dl>
								<dt>米兔 生活周边</dt>
								<dd class="glyphicon glyphicon-menu-right"></dd>
								<div class="clear"></div>
							</dl>
						</a>

					</li>
				</ul>
			</aside>
			<section>

			</section>
		</div>
		<script src="bootstrap/jquery.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</body>

</html>